<template>
  <div>
    <div class="headPart">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="loadGrid">加载网格</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="compare">对比选中</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="deleteChecked">置空选中</el-button>
        </el-form-item>
        <el-form-item>
          <span>当前模型更新时间 {{modelUpdateTime}}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        ref="table"
        :data="tableData"
        border
        :header-cell-style="{background: '#f2f5fc', color: '#555555', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        max-height="550px"
        fit
        :row-class-name="tableRowClassName"
      >
        <!-- 纵向表头列 -->
        <el-table-column
          label="利用系数\总焦比"
          fixed
          border
          width="150px"
        >
          <template #default="scope">
            {{ scope.row.verticalHeader }}
          </template>
        </el-table-column>

        <!-- 横向表头和子表头 -->
        <el-table-column
          v-for="(header, index) in horizontalHeaders"
          :key="index"
          border
          :label="header"
          width="20"
        >
          <!-- 子表头 "气流" -->
          <el-table-column
            label="气流"
            width="80px"
          >
            <template #default="scope">
              <div
                v-for="(item, idx) in scope.row.data[index]"
                :key="idx"
              >
                <div>{{ item.airFlow }}</div>
              </div>
            </template>
          </el-table-column>

          <!-- 子表头 "炉热" -->
          <el-table-column
            label="炉热"
            width="80px"
          >
            <template #default="scope">
              <div
                v-for="(item, idx) in scope.row.data[index]"
                :key="idx"
              >
                <div>{{ item.furnaceHeat }}</div>
              </div>
            </template>
          </el-table-column>

          <!-- 子表头 "操作" -->
          <el-table-column
            label="选中"
            width="50px"
          >
            <template #default="scope">
              <div>
                <div
                  v-for="(item, idx) in scope.row.data[index]"
                  :key="idx"
                >
                  <el-checkbox
                    v-model="item.checked"
                  ></el-checkbox>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :visible.sync="CompareDialog"
      title="对比呈现"
      :width="dialogWidth"
      :top="'15vh'"
      custom-class="custom-dialog-class">
      <div class="compare-dialog-container">
        <div class="card-wrapper">
          <el-card v-for="(category, index) in compareData" :key="index" class="compare-card">
            <div class="category-header">
              <h3>{{ category.category_name }}</h3>
              <p>{{ category.category_describe }}</p>
            </div>
            <div class="category-content">
              <h4>气流特征</h4>
              <el-row v-for="(air, idx) in category.air_feature" :key="idx"
                      :style="{ backgroundColor: idx % 2 === 0 ? '#f5f5f5' : '#94e4ff' }"
                      class="feature-row">
                <el-col :span="12">{{ air.parameter_mean }}</el-col>
                <el-col :span="6">{{ air.value }}</el-col>
              </el-row>
              <h4>炉热特征</h4>
              <el-row v-for="(temp, idx) in category.temp_feature" :key="idx"
                      :style="{ backgroundColor: idx % 2 === 0 ? '#f5f5f5' : '#94e4ff' }"
                      class="feature-row">
                <el-col :span="12">{{ temp.parameter_mean }}</el-col>
                <el-col :span="6">{{ temp.value }}</el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogWidth: '80%', // 初始宽度
      interval: null,
      modelUpdateTime: '2023-06-07 12:00:00',
      checkedData: [],
      CompareDialog: false,
      // 横向表头
      horizontalHeaders: ['[350-inf]', '[335-350]', '[320-335]', '[305-320]', '[0-305]'],
      // 表格数据，每个交叉单元格包含多个数据
      tableData:[
        {
          verticalHeader: '利用系数[0-1.8]',
          data: [
            [
              {
                airFlow: '气流 1',
                furnaceHeat: '炉热 1',
                operation: '操作 1',
                checked: false, // 新增勾选状态
              },
              {
                airFlow: '气流 2',
                furnaceHeat: '炉热 2',
                operation: '操作 2',
                checked: false,
              },
              {
                airFlow: '气流 3',
                furnaceHeat: '炉热 3',
                operation: '操作 3',
                checked: false,
              },
            ],
            [
              {
                airFlow: '气流 1',
                furnaceHeat: '炉热 1',
                operation: '操作 1',
                checked: false,
              },
              {
                airFlow: '气流 2',
                furnaceHeat: '炉热 2',
                operation: ' 操作 2',
                checked: false,
              }
            ],
            [
              {
                airFlow: '气流 1',
                furnaceHeat: '炉热 1',
                operation: ' 操作 1',
                checked: false,
              },
              {
                airFlow: '气流 2',
                furnaceHeat: '炉热 2',
                operation: ' 操作 2',
                checked: false,
              }
            ],
            [
              {
                airFlow: ' 气流 1',
                furnaceHeat: ' 炉热 1',
                operation: ' 操作 1',
                checked: false,
              },
              {
                airFlow: ' 气流 2',
                furnaceHeat: ' 炉热 2',
                operation: '操作 2',
                checked: false,
              }
            ],
            [
              {
                airFlow: ' 气流 1',
                furnaceHeat: ' 炉热 1',
                operation: ' 操作 1',
                checked: false,
              },
              {
                airFlow: ' 气流 2',
                furnaceHeat: ' 炉热 2',
                operation: ' 操作 2',
                checked: false,
              }
            ]
          ]
        },
        {
          verticalHeader: '利用系数[1.8-2.0]',
          data: [
            [
              {
                airFlow: '气流 1',
                furnaceHeat: ' 炉热 1',
                operation: ' 操作 1',
                checked: false,
              },
              {
                airFlow: ' 气流 2',
                furnaceHeat: '炉热 2',
                operation: '操作 2',
                checked: false,
              },
            ],
            [
              {
                airFlow: ' 气流 1',
                furnaceHeat: ' 炉热 1',
                operation: ' 操作 1',
                checked: false,
              },
              {
                airFlow: ' 气流 2',
                furnaceHeat: ' 炉热 2',
                operation: ' 操作 2',
                checked: false,
              }
            ],
            [
              {
                airFlow: ' 气流 1',
                furnaceHeat: ' 炉热 1',
                operation: ' 操作 1',
                checked: false,
              },
              {
                airFlow: ' 气流 2',
                furnaceHeat: ' 炉热 2',
                operation: ' 操作 2',
                checked: false,
              }
            ],
            [
              {
                airFlow: ' 气流 1',
                furnaceHeat: ' 炉热 1',
                operation: '操作 1',
                checked: false,
              },
              {
                airFlow: ' 气流 2',
                furnaceHeat: '炉热 2',
                operation: ' 操作 2',
                checked: false,
              }
            ],
            [
              {
                airFlow: ' 气流 1',
                furnaceHeat: ' 炉热 1',
                operation: ' 操作 1',
                checked: false,
              },
              {
                airFlow: ' 气流 2',
                furnaceHeat: ' 炉热 2',
                operation: ' 操作 2',
                checked: false,
              }
            ]
          ]
        },
      ],
      compareData: [
        {
          category_id: '6dd793730adb4913aaa75cc1889abbe1',
          category_name: '气流0炉热0',
          category_describe: '利用系数总焦比网格4-5',
          air_feature: [
            {
              parameter_id: '1',
              parameter_mean: '炉喉温度',
              value: '320',
              parameter_dimension: '℃',
            },
            {
              parameter_id: '2',
              parameter_mean: '炉喉温度',
              value: '330',
              parameter_dimension: '℃',
            },
          ],
          temp_feature: [
            {
              parameter_id: '1',
              parameter_mean: '炉喉温度',
              value: '320',
              parameter_dimension: '℃',
            },
            {
              parameter_id: '2',
              parameter_mean: '炉喉温度',
              value: '330',
              parameter_dimension: '℃',
            },
          ]
        },
        {
          category_id: '6dd793730adb4913aaa75cc1889abbe1',
          category_name: '气流1炉热2',
          category_describe: '利用系数总焦比网格4-4',
          air_feature: [
            {
              parameter_id: '1',
              parameter_mean: '炉喉温度',
              value: '320',
              parameter_dimension: '℃',
            },
            {
              parameter_id: '2',
              parameter_mean: '炉喉温度',
              value: '330',
              parameter_dimension: '℃',
            },
          ],
          temp_feature: [
            {
              parameter_id: '1',
              parameter_mean: '炉喉温度',
              value: '320',
              parameter_dimension: '℃',
            },
            {
              parameter_id: '2',
              parameter_mean: '炉喉温度',
              value: '330',
              parameter_dimension: '℃',
            },
          ]
        }
      ],
    };
  },

  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'warning-row';
      }
    },
    // 处理窗口大小变化
    handleResize() {
      if (this.$refs.table) {
        this.$refs.table.doLayout(); // 重新计算表格布局
      }
    },
    deleteChecked(){
      // 遍历顶层tableData数组
      this.tableData.forEach(item => {
        // 检查item.data是否存在且是一个数组
        if (item && Array.isArray(item.data)) {
          // 遍历item.data数组
          item.data.forEach(dataItem => {
            // 检查dataItem是否存在且是一个数组
            if (dataItem && Array.isArray(dataItem)) {
              // 遍历dataItem数组
              dataItem.forEach(dataItem2 => {
                // 检查dataItem2是否存在以及它是否有一个checked属性
                if (dataItem2 && 'checked' in dataItem2 && dataItem2.checked) {
                  dataItem2.checked = false;
                }
              });
            }
          });
        }
      });
    },
    selectCheckedData(tableData) {
      if (!tableData || !Array.isArray(tableData)) {
        console.error('tableData is not an array');
        return;
      }

      let checkedData = [];

      for (let i = 0; i < tableData.length; i++) {
        if (!tableData[i] || !tableData[i].data || !Array.isArray(tableData[i].data)) {
          continue;
        }

        for (let j = 0; j < tableData[i].data.length; j++) {
          if (!Array.isArray(tableData[i].data[j])) {
            continue;
          }

          for (let k = 0; k < tableData[i].data[j].length; k++) {
            if (tableData[i].data[j][k].checked) {
              const item = {
                airFlow: tableData[i].data[j][k].airFlow,
                furnaceHeat: tableData[i].data[j][k].furnaceHeat,
                li: (i + 1).toString(),
                zo: (j + 1).toString()
              };
              checkedData.push(item);
            }
          }
        }
      }
      // 对字符串形式的 li 和 zo 进行数字排序
      checkedData.sort((a, b) => {
        const liA = parseInt(a.li, 10);
        const liB = parseInt(b.li, 10);
        const zoA = parseInt(a.zo, 10);
        const zoB = parseInt(b.zo, 10);

        if (liB === liA) {
          return zoB - zoA;  // 根据 zo 进行降序排序
        } else {
          return liB - liA;  // 根据 li 进行降序排序
        }
      });

      return checkedData;
    },
    compare(){
      console.log(this.tableData)
      this.checkedData = this.selectCheckedData(this.tableData)
      if (this.checkedData.length < 2) {
        this.$message.warning('请选择至少两个数据');
        return;
      }
      // 根据选中数量计算对话框宽度
      const selectedCount = this.checkedData.length;
      this.dialogWidth = selectedCount > 5 ? '85%' : `${Math.max(30, 17 * selectedCount)}%`;


      this.CompareDialog = true

      console.log(this.checkedData)
      this.$axios.post(this.$httpUrlVisualization+'/compare', this.checkedData).then(res =>{
        res = res.data;
        console.log(res)
        if(res.code === 200){
          this.compareData = res.data;
        }else{
          this.$message.error(res.msg);
        }
      }).catch(err =>{
        this.$message.error(err);
      })
    },
    loadGrid(){
      this.$axios.get(this.$httpUrlVisualization+'/getGridData').then(res =>{
        res = res.data;
        console.log(res)
        if(res.code === 200){
          this.tableData = res.data.tableData;
          this.modelUpdateTime = res.data.modelUpdateTime;
          this.horizontalHeaders = res.data.horizontalHeaders;
        }else{
          this.$message.error(res.msg);
        }
      }).catch(err =>{
        this.$message.error(err);
      })
    }
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
    this.loadGrid();
  },
  beforeDestroy() {
    // 移除监听器
    window.removeEventListener('resize', this.handleResize);
  },
};
</script>

<style scoped>

.table-container {
  margin-top: 1%;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.el-table {
  width: 100%;
  height: 100%;
  flex: 1;
}

.headPart {
  align-items: center;
  justify-content: center;
  padding: 12px 0px 0px 18px;
  border-radius: 15px;
  box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.1);
}

.compare-dialog-container {
  overflow-x: auto;
  white-space: nowrap;
  padding: 20px 0;
}

.card-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.compare-card {
  min-width: 250px;
  max-width: 300px;
  margin-right: 20px;
}

.category-header {
  margin-bottom: 10px;
}

.category-content {
  margin-top: 10px;
}

.feature-row {
  margin-bottom: 5px;
}
</style>
